<template>
	<div class="bg-[url('/shop_bg.png')] bg-[length:750px_400px] bg-no-repeat w-[750px] pt-[80px]">
		<div class="flex sticky top-[0px] left-0 flex-row items-center w-[700px] h-[60px] mx-[25px] bg-[#ffffffcf] text-[#999999] rounded-full">
			<div class="iconfont icon-sousuo icon"></div>
			<input class="text-[24px] bg-[#00000000]" placeholder="西瓜" />
		</div>
		<div class="w-[700px] bg-white rounded-[10px] p-[20px] mx-[25px] mt-[50px] shadow-md">
			<div class="flex flex-row items-center justify-between">
				<div class="">
					<div class="text-[40px] tracking-[4px]">切果NOW!</div>
					<div class="flex flex-row items-center">
						<div class="text-[#FF770B] text-[26px] mr-[10px]">4.9分</div>
						<div class="text-[#02B6FD] text-[26px] mr-[10px] border-2 border-solid border-[#02B6FD] rounded-[10px] px-[5px]">商家配送</div>
						<div class="text-[26px] mr-[10px]">约38分钟 • 月售400+</div>
					</div>
				</div>
				<img class="w-[96px] h-[96px]" :src="shop_avatar" alt="" />
			</div>
			<div class="text-[#999999] mt-[10px] text-[24px] whitespace-nowrap overflow-hidden text-ellipsis">
				公告：欢迎光临全国领先的果切品牌切果NOW！成立6年来，我们在全国一百多个大中城市的近700家门店，一直秉承着“只用鲜果现切”的理念，用优质出品努力让吃到好水果变得更简单，已累计服务消费者近7000万人次。您有任何建议、团餐、加盟等事宜均可致电：4000137517。
			</div>
			<div class="flex flex-row items-center text-[24px] mt-[10px]">
				<img class="w-[22px] h-[22px] mr-[5px]" :src="icon1" alt="" />
				<div>支持预定</div>
				<img class="w-[22px] h-[22px] mr-[5px] ml-[10px]" :src="icon2" alt="" />
				<div>到店自取</div>
				<img class="w-[22px] h-[22px] mr-[5px] ml-[10px]" :src="icon3" alt="" />
				<div>可开发票</div>
			</div>
			<div class="flex flex-row items-center text-[24px] mt-[20px]">
				<div class="text-[#FF4B33] text-[24px] px-[8px] border-2 border-solid border-[#FF4B33] rounded-[10px] mr-[10px]">15减1</div>
				<div class="text-[#FF4B33] text-[24px] px-[8px] border-2 border-solid border-[#FF4B33] rounded-[10px] mr-[10px]">35减4</div>
				<div class="text-[#FF4B33] text-[24px] px-[8px] border-2 border-solid border-[#FF4B33] rounded-[10px] mr-[10px]">79减8</div>
				<div class="text-[#FF4B33] text-[24px] px-[8px] border-2 border-solid border-[#FF4B33] rounded-[10px] mr-[10px]">配送费满0.01减5</div>
			</div>
		</div>
		<div class="flex flex-row items-center text-[32px] m-[25px] pt-[20px] sticky top-[60px] left-0 bg-[white]">
			<div class="mr-[20px] border-b-[6px] border-[#02B6FD] border-solid">全部商品</div>
			<div class="mr-[20px]">评价</div>
			<div class="mr-[20px]">商家</div>
			<div class="w-[230px]"></div>
			<div class="bg-[#ebf9ff] text-[#02B6FD] text-[24px] px-[10px] py-[5px] rounded-full">
				<span class="bg-[#02B6FD] text-[#fff] px-[10px] py-[5px] rounded-full">外卖</span>
				自提
			</div>
		</div>
		<img class="w-[750px]" :src="shop_title" alt="" />
		<div v-for="i in 10" class="w-[700px] m-[25px] flex flex-row items-start">
			<img class="w-[190px] h-[190px]" :src="shop_item1" alt="" />
			<div class="ml-[10px]">
				<div class="text-[28px]">【果切】冰镇西瓜(约200g) 阳光果切</div>
				<div class="text-[24px] text-[#999999] mt-[10px]">月售900+</div>
				<div class="w-fit text-[#FF4B33] text-[24px] mt-[8px] px-[8px] border-2 border-solid border-[#FF4B33] rounded-[10px] mr-[10px]">爆品N选1 | 限1份</div>
				<div class="text-[#FF4B33] text-[32px]">
					￥0.99
					<span class="text-[#999999] text-[24px] line-through translate-y-1/2">￥19.99</span>
				</div>
				<div class="flex flex-row justify-end">
					<div class="bg-[#02B6FD] text-[white] rounded-full text-[40px] w-[48px] h-[48px] text-center leading-[48px]">+</div>
				</div>
			</div>
		</div>
	</div>
	<div class="flex flex-row items-center fixed bottom-0 left-0 w-[750px] h-[104px] bg-white border-t-[1px] border-solid border-[#0000001f]">
		<img class="w-[630px] h-[210px] -translate-y-[50px] -translate-x-[420px]" :src="shopcar" alt="" />
		<div class="w-[120px] h-[104px] relative">
			<div class="w-[300px] absolute left-[-420px] top-0">
				<div class="text-[#333333] text-[36px]">￥0</div>
				<div class="text-[#999999] text-[24px]">预估加配送费5</div>
			</div>
			<div @click="Nav.navBack()" class="absolute left-[-130px] top-[12px] rounded-full w-[220px] h-[80px] leading-[80px] text-center bg-[#02B6FD] text-white">下单</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	import shop_bg from '@/assets/images/shop_bg.png';
	import shop_item1 from '@/assets/images/shop_item1.gif';
	import shop_item2 from '@/assets/images/shop_item2.gif';
	import shop_avatar from '@/assets/images/shop_avatar.webp';
	import shop_title from '@/assets/images/shop_title.webp';
	import shopcar from '@/assets/images/shopcar.png';
	import icon1 from '@/assets/images/icon1.webp';
	import icon2 from '@/assets/images/icon3.webp';
	import icon3 from '@/assets/images/icon3.webp';
	import { Nav } from '@/main';
</script>
<style scoped>
	.icon {
		font-size: 30px;
		margin: 0 30px;
	}
	.searchInput {
		background-color: rgba(0, 0, 0, 0);
	}
</style>
